<!-- @Author: Yu_Bo -->
<template>
	<view class="placeorder" :class="type==2?'placeorder_bg':''">
		<view class="opinion_txt">
			<view class="left">
				卖书方式
			</view>
			<view class="right_wen">
				自行送书
			</view>
		</view>
		<view class="opinion_txt">
			<view class="left">
				姓名
			</view>
			<view class="right">
				<u-input v-model="name" type="text" :clearable="false" placeholder="请输入姓名"
					:placeholder-style="placeholderStyle" />
			</view>
		</view>
		<view class="opinion_txt">
			<view class="left">
				电话
			</view>
			<view class="right">
				<u-input v-model="mobile" type="text" :clearable="false" placeholder="请输入电话"
					:placeholder-style="placeholderStyle" />
			</view>
		</view>
		<!--  -->
		<view class="money_upload">
			<view class="up_txt">
				自行送书地/须知
			</view>
			<view class="text">
				<u-parse :html="sellinginfo.sending_books"></u-parse>
			</view>
		</view>
		<!--  -->
		<view class="money_upload" @click="upimageBtn" v-if="type==1">
			<view class="up_txt">
				添加照片
			</view>
			<view class="up_btn">
				<image v-if="fullurl" :src="fullurl" mode="aspectFit"></image>
				<image v-else src="@/static/images/img/upload_icon.png" mode=""></image>
			</view>
		</view>
		<!-- 底部按钮 -->
		<c-footer v-if="type==1">
			<view class="footer_btn">
				<view class="btn_txt color_right page_button" @click="submitBtn">
					<u-loading v-if="loading" mode="flower" color="#ffffff"></u-loading>
					提交订单
				</view>
			</view>
		</c-footer>
		<!-- 底部按钮 -->
		<c-footer v-if="type==2">
			<view class="book_footer">
				<view class="left">
					<text class="num">共{{totalNum}}件</text>
					<text>合计：</text>
					￥{{totalMoney}}
				</view>
				<view class="right">
					<view class="btn_txt color_right page_button" @click="submitScanBtn">
						<u-loading v-if="loading" mode="flower" color="#ffffff"></u-loading>
						提交订单
					</view>
				</view>
			</view>
		</c-footer>
	</view>
</template>

<script>
	import { mapState } from "vuex"
	export default {
		components: {},
		data() {
			return {
				type: null,// 1直接下单  2扫码下单
				placeholderStyle: "color: #999999",
				// 
				name: "",
				mobile: "",
				fullurl: "",
				url: "",
				loading: false,
				// 
				goods: [],
				totalNum: 0,
				totalMoney: "0.00"
			}
		},
		computed: {
			...mapState({
				sellinginfo: (state) => state.sellinginfo
			}),
		},
		onLoad(opt) {
			this.type = opt.type
			if(opt.goods) {
				this.goods = decodeURIComponent(opt.goods)
				this.totalNum = opt.totalNum
				this.totalMoney = opt.totalMoney
			}
		},
		onShow() {},
		methods: {
			// 提交订单
			submitScanBtn() {
				var that = this
				if(that.name == null) {
					that.$tips.showToast('请输入姓名')
					return
				}
				if (that.mobile == '' || !that.$test.phoneTrue(that.mobile)) {
					that.$tips.showToast('请输入正确的手机号')
					return
				}
				if(that.loading) return
				that.loading = true
				var params = {
					full_name: that.name,
					phone: that.mobile,
					goods: that.goods
				}
				that.$httpApi.sellOrder(params).then((res) => {
					that.loading = false
					if (res.code == 1) {
						that.$navToLogin("/pagesSell/successfully/index")
					}
				})
			},
			// 直接下单
			submitBtn() {
				var that = this
				if(that.name == null) {
					that.$tips.showToast('请输入姓名')
					return
				}
				if (that.mobile == '' || !that.$test.phoneTrue(that.mobile)) {
					that.$tips.showToast('请输入正确的手机号')
					return
				}
				if (that.url == '') {
					that.$tips.showToast('请添加照片')
					return
				}
				if(that.loading) return
				that.loading = true
				var params = {
					full_name: that.name,
					phone: that.mobile,
					image: that.url
				}
				that.$httpApi.directlyOrder(params).then((res) => {
					that.loading = false
					if (res.code == 1) {
						that.$navToLogin("/pagesSell/successfully/index")
					}
				})
			},
			// 上传图片
			upimageBtn() {
				var that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						const tempFilePaths = res.tempFilePaths;
						that.updateImage(tempFilePaths[0])
					},
					error: function(e) {
						// console.log(e);
					}
				})
			},
			// 上传
			updateImage(src) {
				var that = this
				that.$tips.showLoading('上传中')
				const uploadTask = uni.uploadFile({
					url: that.$baseVal.baseUrl+'/api/common/upload',
					filePath: src,
					name: 'file',
					formData: {},
					header: {
						'token': uni.getStorageSync('token')
					},
					success: function(uploadFileRes) {
						that.$tips.hideLoading()
						var res = JSON.parse(uploadFileRes.data)
						console.log(res)
						if(res.code==1){
							that.fullurl = res.data.fullurl
							that.url = res.data.url
						}else{
							that.$tips.showToast(res.msg)
						}
					}
				});
			},
		},
	}
</script>

<style lang='scss' scoped>
	.placeorder {
		width: 100%;
		padding: 30rpx 30rpx;

		.opinion_txt {
			width: 100%;
			height: 112rpx;
			margin-bottom: 30rpx;
			padding: 0 30rpx;
			background: #F6F6F6;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
			}

			.right {
				width: 450rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
				display: flex;
				align-items: center;
				justify-content: flex-end;

				image {
					display: block;
					width: 28rpx;
					height: 28rpx;
					margin-left: 10rpx;
				}

				u-input {
					width: 100%;
					;
				}

				::v-deep .u-input {
					width: 100%;

					.u-input__input {
						width: 100%;
						text-align: right;
					}
				}
			}

			.right_wen {
				width: 450rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #222222;
				display: flex;
				align-items: center;
				justify-content: flex-end;
			}
		}

		.money_upload {
			width: 100%;
			margin-bottom: 30rpx;
			padding: 30rpx;
			background: #F6F6F6;
			border-radius: 20rpx;

			.up_txt {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #222222;
			}

			.up_btn {
				width: 182rpx;
				height: 182rpx;
				margin-top: 30rpx;

				image {
					display: block;
					width: 100%;
					height: 100%;
					border-radius: 20rpx;
				}
			}

			.text {
				width: 100%;
				margin-top: 20rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
			}
		}

		.footer_btn {
			width: 100%;
			padding: 30rpx 30rpx;
			background: #fff;

			.btn_txt {
				width: 100%;
				height: 90rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #FFFFFF;
				border-radius: 45rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		
		.book_footer {
			width: 100%;
			height: 100rpx;
			padding: 30rpx 30rpx;
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			.left {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #FF3E3E;
				display: flex;
				align-items: center;
				
				text {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #3D444D;
				}
				
				.num {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #999999;
					margin-right: 10rpx;
				}
			}
			
			.right {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				
				.btn_txt {
					width: 200rpx;
					height: 70rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #FFFFFF;
					border-radius: 45rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}
	
	.placeorder_bg {
		min-height: 100vh;
		background: #F6F6F6;
		
		.opinion_txt {
			background: #ffffff;
		}
		
		.money_upload {
			background: #ffffff;
		}
	}
</style>